<template>
    <div>
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="150px" class="demo-ruleForm">

            <div class="container"  style="margin-top:20px">
                <h3 style="margin-bottom: 20px">产品信息</h3>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="产品标题：" prop="title">
                            <el-input placeholder="请输入内容" v-model="ruleForm.title" style="width:300px">
                            </el-input>
                        </el-form-item>


                        <el-form-item label="产品图片：" prop="img" style="width:500px">
                            <el-upload
                                class="upload-poster"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-change="imgPreview"
                                :auto-upload="false">
                                <img v-if="img" :src="img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            jpg、png、gif格式，60x60像素，不超过2MB
                        </el-form-item>
                    </el-col>
                    <el-col :span ="10">
                        <el-form-item label="关联产品：" prop="checkName" v-if = "lj=='生产'">
                           <el-select v-model="ruleForm.relatedProducts"  value-key="id" filterable placeholder="请选择" style="width: 300px;">
                                <el-option
                                    v-for="item in wllist"
                                    :key="item.id"
                                    :label="item.materialName"
                                    :value="item.materialName"
                                >
                                {{item.materialName}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="关联产品：" prop="checkName" v-else>
                           <el-select v-model="ruleForm.relatedProducts"  value-key="id" filterable placeholder="请选择" style="width: 300px;">
                                <el-option
                                    v-for="item in basesourcelist"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name"
                                >
                                {{item.name}}
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="保质期：" prop="quality">
                            <el-input placeholder="请输入内容" v-model="ruleForm.quality" style="width:260px">
                            </el-input> 个月
                        </el-form-item>
                        <el-form-item label="电商链接：">
                            <el-input placeholder="请输入内容" v-model="ruleForm.link" style="width:300px">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="container" style="margin-top:10px;">
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="产品介绍：" prop="introduce">
                            <div ref="editor" style="width:100%;"></div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <el-form-item class="footerFixed" label-width="0px">
                <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>

import {materialManagement_findBylistNoPage} from "@/request/produceApi"
import {products_save,basesource_findByAll,products_findById,model_crop_loadbind} from "@/request/api"
    import uploadImg from '../../../common/uploadImg';
    import E from 'wangeditor';
    export default {
        data(){
            return{
                basesourcelist:[],
                img:'',
                s:'',
                 radio:1,
                type:[
                    {name:1}
                ],
                // ifshow:true,
                imgurl:'',
                show:true,
                labelPosition:'right',
                // showForm: false,
                ruleForm: {

                },
                listUrl:'',
                id:'',
                rules:{
                    title: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    img: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    relatedProducts: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    quality: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    introduce: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                },
                lj:'',
                wllist:[]
            }
        },
        mounted(){

            this.lj = localStorage.getItem('lj')

             this.id= this.$route.query.id
             this.getbasesource()
             this.getwllist()
            if(this.id == undefined){

            }else{
                this.init()
            }
             var editor = new E(this.$refs.editor)
            editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
            editor.customConfig.uploadFileName = 'files';
            editor.customConfig.uploadImgHooks = {
                customInsert: function (insertImg, result, editor) {
                    // console.log(this.$store.state.imageUrls)
                   var url = "http://grove.cpzsyun.com:81/api/plant/file/show/" + result.data.fileName
                    insertImg(url)

                }
            }
	        editor.customConfig.onchange = (html) => {
                this.ruleForm.introduce = html
            }
	        editor.create();
	        editor.txt.html(this.ruleForm.introduce)
        },
        methods:{
            getwllist(){
                materialManagement_findBylistNoPage({}).then((res)=>[
                    this.wllist = res.data
                ])
            },
            init(){
				products_findById(this.id).then((res)=>{
					this.ruleForm = res.data
					this.img = this.$store.state.plantImg + this.ruleForm.img
					var editor = new E(this.$refs.editor)
					editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
					editor.customConfig.uploadFileName = 'files';
					editor.customConfig.uploadImgHooks = {
					    customInsert: function (insertImg, result, editor) {
					        // console.log(this.$store.state.imageUrls)
					        var url = "http://grove.cpzsyun.com:81/api/plant/file/show/" + result.data.fileName
					        insertImg(url)

					    }
					}
					editor.customConfig.onchange = (html) => {
					    this.ruleForm.introduce = html
					}
					editor.create();
					editor.txt.html(this.ruleForm.introduce)
				})
            },
            getbasesource(){
                model_crop_loadbind("").then((res)=>{
                    this.basesourcelist = res.data
                })
            },
            backPage () {
                this.$router.go(-1);

            },

            submitrule(formName){
                let formdata = new FormData
                for(var a in this.ruleForm){
                    if(this.ruleForm[a] == null || this.ruleForm[a] == "null"){
                        this.ruleForm[a] = ""
                        formdata.append(a,'')
                    }else{
                        formdata.append(a,this.ruleForm[a])
                    }
                }
                // let data = this.ruleForm
                products_save(formdata).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '保存成功',
					    type: 'success',
					    duration:1000
					});
					this.$router.go(-1)
				})
            },
            imgPreview(file,fileList) {
                this.img =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png|.jpeg)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.ruleForm.files = file.raw
                    this.ruleForm.img = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
            },
        }
    }
</script>

<style scoped>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .el-upload--text{
      width:180px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
